<template>
  <el-dialog
    class="public-dialog"
    :title="`${isEdit ? '修改' : '新增'}`"
    width="936"
    :modelValue="modelValue"
    @close="handleClose"
    draggable
    align-center
  >
    <div>
      <VForm
        ref="form"
        :fieldList="fieldList"
        :options="formOption"
        :disabled="disabled"
        :originOption="options"
        @submit="handleSearch"
      >
      </VForm>
      <RuleTable
        ref="tableRef"
        :optionsData="options"
        :params="model"
        :id="model.id"
      />
    </div>
    <template #footer>
      <div class="dialog-button">
        <el-button :disabled="loading" @click="handleClose(false)">
          关闭
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="jsx">
import VForm from '@/components/Form/index.vue'
import RuleTable from './RuleTable/index.vue'

import { useFetchSelect } from '@/hooks'

const props = defineProps({
  id: { type: [String, Number], default: '' },
  modelValue: { type: Boolean, default: false },
  disabled: { type: Boolean, default: false },
})

const emit = defineEmits(['update:modelValue', 'refresh', 'close'])

const formOption = {
  labelPosition: 'top',
  inline: true,
  option: true,
  showResetButton: true,
}

const form = ref()
const model = ref({})
const loading = ref()
const tableRef = ref()

const { options } = useFetchSelect({
  params: 'finance.initial-audit',
})

const publicStyle = { style: { width: '160px' } }
const fieldList = [
  {
    field: 'rule_name',
    placeholder: '规则名称',
    style: { width: '220px' },
  },
  {
    field: 'fee_type',
    type: 'select',
    options: {
      placeholder: '费用类型',
    },
    originField: 'fee_type',
  },
  {
    field: 'status',
    type: 'select',
    originField: 'status',
    ...publicStyle,
  },
  {
    field: 'create_user',
    placeholder: '创建人',
    ...publicStyle,
  },
  {
    field: 'create_time',
    placeholder: '创建时间',
    type: 'dateTimeRange',
    itemProps: {
      startPlaceholder: '请选择创建时间',
    },
  },
]

const isEdit = computed(() => {
  return !!props.id
})

const handleSearch = formValues => {
  model.value = formValues
  nextTick(() => {
    tableRef.value.handleRefresh()
  })
}

const handleClose = async refresh => {
  model.value = {}
  await nextTick()
  form.value.resetForm()
  emit('update:modelValue', false)
  emit('close')
  if (refresh) emit('refresh')
}
</script>
